<template>
	<view class="search">
		<view class="search-box">
			<u-search placeholder="搜索" v-model="keyword" shape="square" height="72" :show-action="false" @search="handleSearch"></u-search>
		</view>

		<view class="recommend-list">
			<view class="recommend-item-box" v-for="(keyWord,index) in keyWordList" :key="index">
				<view class="recommend-item" @click="handleJump(keyWord)">
					{{ keyWord }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				keyWordList: ['健身', '绘画', '练字', '书法', '小语种', '跑步', '烹饪', '打卡']
			}
		},
		
		methods: {
			handleSearch() {
				uni.navigateTo({
					url: `/pages/insidePages/search/searchResults?keyWord=${this.keyword}`
				})
			},
			
			handleJump(keyword) {
				this.keyword = keyword
				uni.navigateTo({
					url: `/pages/insidePages/search/searchResults?keyWord=${keyword}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.search {
		padding: 40rpx 40rpx 0;
	}

	.search-box {
		margin-bottom: 48rpx;
	}

	.recommend-list {
		display: flex;
		flex-wrap: wrap;

		.recommend-item-box {
			width: calc(100% / 3);
			padding: 16rpx;
			box-sizing: border-box;
			
			.recommend-item {
				height: 72rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f5f5f5;
				font-size: 24rpx;
				border-radius: 8rpx;
			}
		}
	}
</style>
